<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/flexible.js"></script>
    <script src="../js/echarts.min.js"></script>
    <style>
        .box {
            width: 7.5rem;
            height: 5rem;
        }
    </style>
</head>

<body>

    <!-- 
        折线图常规配置
        xAxis
        yAxis
        series中type设为line

        折线图常见效果
        最大值 series中设置markPoint max  
        最小值 series中设置markPoint min
        平均值 series中设置markLine
        贴边xAxis或yAxis设置boundaryGap
        填充颜色 series中设置markPoint markArea
        smooth线条平滑
        scale脱离0从最小值开始 xAxis或yAxis中配置
        线条显示累加 series中的 stack
        线条样式 series中的lineStyle
        填充风格series中的areaStyle
     -->
    <div class="box" id='box'></div>
    <script>
        const MyEcharts = echarts.init(document.getElementById('box'))
        const Xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        const Ydata = [1000, 5000, 3000, 2000, 1000, 6000, 5000, 2000, 4000, 1000, 5000, 3000]
        const Ydata2 = [500, 1000, 1500, 2000, 1000, 6000, 2000, 2000, 4000, 1000, 5000, 3000]
        const option = {
            xAxis: {
                type: 'category',
                data: Xdata,
                boundaryGap: false, //紧挨最边距
            },
            yAxis: {
                type: 'value',
                scale: true, //脱离从0开始 而是从最小的开始
            },
            series: [{
                    data: Ydata,
                    type: 'line',
                    name: '线形图',
                    smooth: true, //线条平滑
                    stack: 'all', //后面的图会根据前面图的累加显示
                    lineStyle: { //设置线条的样式
                        color: 'green',
                        type: 'dashed'
                    },
                    areaStyle: { //填充风格
                        color: 'pink'
                    },

                    markPoint: {
                        data: [{
                            type: 'max' //最大值
                        }, {
                            type: 'min' //最小值
                        }]
                    },
                    markLine: {
                        data: [{ //平均值
                            type: 'average',
                        }]
                    },
                    markArea: { //标注区间
                        data: [
                            [{
                                xAxis: '1月'
                            }, {
                                xAxis: '3月'
                            }],
                            [{
                                xAxis: '10月'
                            }, {
                                xAxis: '12月'
                            }]
                        ]
                    }
                },
                {
                    data: Ydata2,
                    type: 'line',
                    name: '线形图2',
                    stack: 'all', //后面的图会根据前面图的累加显示
                    smooth: true, //线条平滑
                    lineStyle: { //设置线条的样式
                        color: 'yellow',
                        type: 'dashed'
                    },
                    areaStyle: { //填充风格
                        color: 'pink'
                    },
                    markPoint: {
                        data: [{
                            type: 'max' //最大值
                        }, {
                            type: 'min' //最小值
                        }]
                    },
                    markLine: {
                        data: [{ //平均值
                            type: 'average',
                        }]
                    },
                    markArea: { //标注区间
                        data: [
                            [{
                                xAxis: '1月'
                            }, {
                                xAxis: '3月'
                            }],
                            [{
                                xAxis: '10月'
                            }, {
                                xAxis: '12月'
                            }]
                        ]
                    }
                }
            ]
        };
        MyEcharts.setOption(option)
    </script>

</body>

</html>

</html>